<template>
  <div>
    <el-upload
      :headers="headerObj"
      action="http://127.0.0.1:8888/api/private/v1/upload"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :file-list="fileList"
      list-type="picture"
    >
      <el-button size="small" type="primary">点击上传图片</el-button>
    </el-upload>
    <!-- 图片预览 -->
    <el-dialog title="图片预览" :visible.sync="previewVisible" width="50%">
      <img class="previewImg" :src="preViewPath" alt />
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
      headerObj: {
        Authorization: window.sessionStorage.getItem('token')
      },
      preViewPath: '',
      previewVisible: false
    }
  },
  methods: {
    handlePreview(file) {
      this.preViewPath = file.response.data.url
      this.previewVisible = true
    },
    handleRemove() {
      console.log(2)
    }
  }
}
</script>

<style lang="less" scoped>
.previewImg {
  width: 100%;
}
</style>
